<template>
  <div class="consumption-box">
    <div class="consumption-box-top">
      <h3>用户消费金额分布</h3>
    </div>
    <div class="consumption-box-bot">
      <div
        ref="_chart"
        class="echar"
      />
    </div>
  </div>
</template>

<script>
import { getConsumptionData } from '@/api/statistics'
export default {
  data() {
    return {
      disOption: {
        xAxis: {
          type: 'category',
          data: [
            '0~50元',
            '51~100元',
            '101~200元',
            '201~500元',
            '501~1000元',
            '1001~5000元',
            '5001~10000元',
            '10000元以上'
          ],
          axisTick: {
            show: false
          },
          nameGap: 30,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#F2F2F2'
            }
          },
          nameTextStyle: {
            color: '#000'
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          nameGap: 30,
          axisLine: {
            lineStyle: {
              color: '#F2F2F2'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#F2F2F2'
            }
          }
        },
        series: [
          {
            data: [],
            type: 'bar',
            itemStyle: {
              color: '#1BE4FC',
              barBorderRadius: [4, 4, 0, 0]
            },
            barMaxWidth: 17
          }
        ],
        label: {
          show: true,
          position: 'top',
          color: '#333333'
        },
        textStyle: {
          color: '#333333'
        }
      },
      myChart: null
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.myChart.resize()
    })
  },
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(this.$refs._chart)
      this.myChart.setOption({ ...this.disOption })
    },
    getData() {
      getConsumptionData().then(res => {
        console.log(res)
        for (const k in res.data[0]) {
          this.disOption.series[0].data.push(~~res.data[0][k])
        }
        this.init()
      })
    }
  }
}
</script>
